<template>
  <page-view>
    <div class=" py-[20px] bg-orange-200">
      <div class="content-box">
        <el-carousel height="400px" type="card" class=" mt-[50px]">
          <el-carousel-item v-for="item in imgList" :key="item" style="width: 680px;">
            <img :src="item" class=" h-full" />
          </el-carousel-item>
        </el-carousel>
        <div class=" mt-[120px]">
          <!-- 我们的优势 -->
          <p class=" title-box bubble">我们的优势</p>
          <el-row :gutter="20">
            <el-col :span="6">
              <el-card class="box-card">
                <div class="flex flex-col items-center">
                  <div class="advantage-box">
                    <span class="iconfont icon-baozhang"></span>
                  </div>
                  <p class="advantage-title">系统安全</p>
                  <span class=" w-6 h-1 bg-[#353535]"></span>
                  <div class=" advantage-txt">
                    我们提供系统级别的安全，保障您的财产和隐私安全。
                  </div>
                </div>
              </el-card>
            </el-col>
            <el-col :span="6">
              <el-card class="box-card">
                <div class="flex flex-col items-center">
                  <div class="advantage-box">
                    <span class="iconfont icon-yimiao"></span>
                  </div>
                  <p class="advantage-title">热点新闻</p>
                  <span class=" w-6 h-1 bg-[#353535]"></span>
                  <div class=" advantage-txt">
                    我们实时追踪宠物热点新闻，第一时间发布到平台供您查阅。
                  </div>
                </div>
              </el-card>
            </el-col>
            <el-col :span="6">
              <el-card class="box-card">
                <div class="flex flex-col items-center">
                  <div class="advantage-box">
                    <span class="iconfont icon-zyfw"></span>
                  </div>
                  <p class="advantage-title">社交互动</p>
                  <span class=" w-6 h-1 bg-[#353535]"></span>
                  <div class=" advantage-txt">
                    我们提供一个社交分享中心，在此您可以和其他朋友一起分享交流。
                  </div>
                </div>
              </el-card>
            </el-col>
            <el-col :span="6">
              <el-card class="box-card">
                <div class=" flex flex-col items-center">
                  <div class="advantage-box">
                    <span class="iconfont icon-shouhou"></span>
                  </div>
                  <p class="advantage-title">售后服务</p>
                  <span class=" w-6 h-1 bg-[#353535]"></span>
                  <div class=" advantage-txt">
                    对于每个客户,我们会提供全方面的服务,在宠物的问题上我们会第一时间解决你的烦恼。
                  </div>
                </div>
              </el-card>
            </el-col>
          </el-row>
          <div class=" h-[390px] mt-[200px] flex justify-between">
            <div class=" w-[50%] bg-[#c7989e] h-full relative flex justify-center items-center">
              <span class="iconfont icon-yinhao-top absolute left-[20px] top-[10px] text-[#d8b7bb] text-[40px]"></span>
              <span
                class="iconfont icon-yinhao-bottom absolute right-[20px] bottom-[10px] text-[#d8b7bb] text-[40px]"></span>
              <div class=" w-[320px]">
                <p class=" text-[40px] font-sans font-bold text-[#fff]">{{ aboutUs.newsTitle }}</p>
                <p class=" text-[#f2eeee]">about us</p>
                <p class=" text-[#f2eeee] text-[13px]">{{ aboutUs.newsContent }}</p>
                <div class="btn_box">联系我们</div>
              </div>
            </div>
            <div class=" flex-1 overflow-hidden" v-if="aboutUs.newsPic"><img :src="publishedBooksMessage"
                class=" h-full photo_scale"></div>
          </div>
          <!-- 产品中心 -->
          <p class=" title-box mt-[200px] bubble">产品中心</p>
          <el-row :gutter="15">
            <el-col :span="8">
              <el-card class="product-card" :body-style="{ padding: '0px' }">
                <img src="../assets/img/cat01.png" class="w-full h-[225px]" />
                <p class=" product_title">留言板</p>
                <div class=" animate_line"></div>
                <p class=" text-[13px] h-10">反馈对系统使用的评价以及改进意见，请留下您宝贵的建议。</p>
                <div class="btn_box mb-18 ml-10" @click="$router.replace({ name: 'MessageInfo' })">查看留言板</div>
              </el-card>
            </el-col>
            <el-col :span="8">
              <el-card class="product-card" :body-style="{ padding: '0px' }">
                <img src="../assets/img/cat02.png" class="w-full h-[225px]" />
                <p class="  product_title">宠物用品</p>
                <div class=" animate_line"></div>
                <p class=" text-[13px] h-10">我们的产品均有合格证明,品质绝对有保障,如存在瑕疵或假货,我们包赔偿。</p>
                <div class="btn_box mb-18 ml-10" @click="$router.replace({ name: 'ProductInfo' })">查看商品</div>
              </el-card>
            </el-col>
            <el-col :span="8">
              <el-card class="product-card" :body-style="{ padding: '0px' }">
                <img src="../assets/img/dog02.png" class="w-full h-[225px]" />
                <p class=" product_title">用户分享</p>
                <div class=" animate_line"></div>
                <p class=" text-[13px] h-10">分享您和宠物之间的点点滴滴，让我们一同快乐！</p>
                <div class="btn_box mb-18 ml-10" @click="$router.replace({ name: 'Share' })">用户分享</div>
              </el-card>
            </el-col>
          </el-row>
          <div class=" h-[390px] mt-[200px] flex justify-between">
            <div class=" flex-1 overflow-hidden"><img src="../assets/img/cat04.png" class=" h-full photo_scale"></div>
            <div class=" w-[50%] bg-[#c7989e] h-full relative flex justify-center items-center">
              <span class="iconfont icon-yinhao-top absolute left-[20px] top-[10px] text-[#d8b7bb] text-[40px]"></span>
              <span
                class="iconfont icon-yinhao-bottom absolute right-[20px] bottom-[10px] text-[#d8b7bb] text-[40px]"></span>
              <div class=" w-[320px]">
                <p class=" text-[40px] font-sans font-bold text-[#fff]">用户评价</p>
                <p class=" text-[#f2eeee]">User evaluation</p>
                <p class=" text-[#f2eeee] text-[13px]">华夏宠物的服务很周到,对于宠物的领养我很满意,宠物用品的价格也比其他地方优惠很多。</p>
                <div class=" flex flex-row items-center mt-[18px]">
                  <img src="../assets/img/head02.png" class=" w-[55px] aspect-square rounded-full">
                  <p class=" text-[13px] text-[#f2eeee] ml-10">来自客户：王先生</p>
                </div>
              </div>
            </div>
          </div>
          <!-- 宠物新闻 -->
          <p class=" title-box mt-[200px] bubble">宠物新闻</p>
          <div class=" flex flex-row border relative" v-loading="isShowLoading" element-loading-text="加载数据中..."
            :element-loading-spinner="loading_svg" element-loading-svg-view-box="-10, -10, 50, 50"
            element-loading-background="rgba(122, 122, 122, 0.8)">
            <ul class=" flex-1 news_list_ul grid grid-rows-4">
              <li v-for="i in newsList" :key="i.id" class=" flex flex-row items-center">
                <div class=" flex flex-row">
                  <div class="bubble  w-[58px] h-[58px] flex justify-center items-center  text-[#000] font-bold mx-8">
                    0{{ i.id }}</div>
                  <div class=" flex-1 overflow-hidden relative pr-[40px]">
                    <p class=" text-[#6d5063] font-bold">{{ i.newsTitle }}</p>
                    <p class=" text-[13px] news_content mt-3">
                      {{ i.newsContent }}
                    </p>
                    <span
                      class="iconfont icon-daohang text-[30px] mx-10 text-[#6b400d] absolute top-[20%] right-0"></span>
                  </div>
                </div>
              </li>
            </ul>
            <div class=" absolute w-1 h-[300px] bg-black right-[305px] top-9"></div>
            <img src="../assets/img/dog04.png" class=" w-[300px]" />
          </div>
          <div class="btn_box m-auto mb-20" @click="$router.replace({ name: 'NewInfo' })">查看更多</div>
        </div>
      </div>
      <el-backtop :right="70" :bottom="100" :visibility-height="400">
        <div class=" iconfont icon-fanhuidingbu text-[40px] text-[#666666] back_top"></div>
      </el-backtop>
    </div>
  </page-view>
</template>
<script setup>
import API from '../utils/API';
import { reactive, ref, onMounted, computed } from "vue";

const loading_svg = `
        <path class="path" d="
          M 30 15
          L 28 17
          M 25.61 25.61
          A 15 15, 0, 0, 1, 15 30
          A 15 15, 0, 1, 1, 27.99 7.5
          L 15 15
        " style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"/>`

let imgList = ref([])
let newsList = ref([])
let aboutUs = reactive({
  newsPic: ''
})
const findHomeInfo = () => {
  API.HomeInfo.homeInfo().then((response) => {
    imgList.value = response.rotographs;
  })
  API.HomeInfo.selectNewsById().then((response) => {
    aboutUs = response;
  })
}
const isShowLoading = ref(false);
const newsListInfo = () => {
  isShowLoading.value = true;
  API.HomeInfo.selectNewsExplit().then((response) => {
    newsList.value = response
  }).catch(error => {
  }).finally(() => {
    isShowLoading.value = false;
  })
}
findHomeInfo();

onMounted(() => {
  newsListInfo();
})

// 一个计算属性 ref
const publishedBooksMessage = computed(() => {
  console.log(aboutUs.newsPic)
  return aboutUs.newsPic.substring(0, 112)
})
</script>

<style scoped lang="scss">
// 多行省略
@mixin text_overflow {
  display: -webkit-box;
  @content;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  overflow: hidden;
}

// 气泡
.bubble {
  transition: all 0.2s linear;
  border-radius: 30% 70% 65% 35% / 44% 49% 51% 56%;
  background-color: #ffffff;
  box-shadow: inset 6px 6px 6px rgba(0, 0, 0, 0.05), 6px 6px 4px rgba(0, 0, 0, 0.05), 4px 5px 5px rgba(0, 0, 0, 0.05), inset -4px -4px 5px rgba(255, 255, 255, 0.9);
}

// 图片缩放
.photo_scale {
  transition: all 0.4s linear;

  &:hover {
    transform: scale(1.1);
  }
}

.back_top {
  transition: all 0.4s linear;

  &:hover {
    color: #d24735;
  }
}

.advantage-box {
  width: 75px;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: #222222;
  margin: 30px 0 40px 0px;

  span {
    font-size: 48px;
    color: #b89e9f;
  }
}

.advantage-title {
  @apply text-[17px] font-bold text-[#535451] mb-[30px];
}

.advantage-txt {
  font-size: 13px;
  margin-top: 20px;
  color: #7e7e85;

  @include text_overflow() {
    -webkit-line-clamp: 2;
  }

  margin: 30px 0;
}

.btn_box {
  box-shadow: 0px 0px 6px 4px #2c2b2b;
  border-radius: 1px;
  font-size: 13px;
  @apply bg-[#424242] w-[140px] h-[35px] flex justify-center items-center mt-[30px] text-[#f2eeee];

  &:hover {
    cursor: pointer;
  }
}

.title-box {
  @apply text-[20px] font-sans mb-[30px] mx-auto w-[170px] h-[170px] flex flex-row items-center justify-center;
  transition: all 0.2s linear;

  &:hover {
    cursor: pointer;
    border-radius: 50%
  }
}

.product_title {
  @apply text-[#686964] text-[18px] mt-8 font-bold;
}

.product-card {
  .animate_line {
    margin: 10px 0;
    height: 4px;
    width: 100px;
    background-color: #020202;
    transform-origin: left;
    transform: scaleX(0.1);
    transition: transform 0.5s linear;

    +p {
      @include text_overflow() {
        -webkit-line-clamp: 2;
      }
    }
  }

  &:hover {
    cursor: pointer;

    .animate_line {
      transform: scaleX(1);
    }
  }
}

.news_list_ul {
  margin-right: 15px;

  li {
    cursor: pointer;

    &:hover {
      .bubble {
        border-radius: 50%;
      }
    }

    .news_content {
      @include text_overflow() {
        -webkit-line-clamp: 2;
      }
    }

    .news_content:hover {
      text-decoration: 1px solid underline rgb(224, 9, 9);
      color: rgb(224, 9, 9);

      &+.icon-daohang {
        transform: rotate(90deg);
      }
    }

    .icon-daohang {
      transition: all 0.5s linear;
    }


  }
}
</style>